<template>
    <div class="custom-page">
        <div class="el-pagination" style="display: inline-block; padding-left: 0px;">
            <span class="custom-page-size">
                <span>共 <span v-html="totalPage">0</span>页</span>
                <span style="padding-left: 10px;">当前第<label v-html="cp">1</label>/<label
                        v-html="totalPage">0</label>页</span>
            </span>
        </div>

        <el-pagination v-if="ps.length>0"
                       layout="sizes"
                       :page-size="ps"
                       :total="total"
                       :page-sizes="ps"
                       @size-change="handleCurrentChange"
                       :current-page.sync="cp"
                       style="display: inline-block;padding-left: 0px;">
        </el-pagination>
        <div class="el-pagination" style="display: inline-block; padding-left: 0px;">
            <!--<el-button :disabled="firstDisabled" @click="toFirstPage" size="mini" type="text">首页</el-button>-->
        </div>
        <el-pagination
                layout="sizes,prev,pager, next"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="ps"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="cp"
                style="display: inline-block;padding-left: 0px;">
        </el-pagination>
        <div class="el-pagination" style="display: inline-block; padding-left: 0px;">
            <!--<el-button :disabled="isLastDisabled" @click="toLastPage" size="mini" type="text">尾页</el-button>-->
        </div>
        <el-pagination
                layout="jumper"
                :page-size="ps"
                :total="total"
                @current-change="handleCurrentChange"
                :current-page.sync="cp"
                style="display: inline-block;padding-left: 0px;">
        </el-pagination>
    </div>
</template>
<script>
export default {
  data() {
    return {
      cp: this.currentPage,
      ps: this.pageSize,
      totalPage: Math.ceil(this.total / this.pageSize),
      firstDisabled: true
    }
  },
  props: {
    pageSizes: {
      type: Array,
      default() {
        return [];
      }
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.totalPage = Math.ceil(this.total / this.pageSize);
      this.$emit('size-change', size);
    },
    handleCurrentChange(page) {
      this.firstDisabled = (page === 1);
      this.$emit('current-change', page);
    },
    toFirstPage() {
      this.cp = 1;
      this.handleCurrentChange(1);
    },
    toLastPage() {
      this.cp = this.totalPage;
      this.handleCurrentChange(this.totalPage);
    }
  },
  watch: {
    cp(v) {
    //  if (v) this.handleCurrentChange(v);
    },
    total(val) {
      this.total = val;
      this.totalPage = Math.ceil(val / this.pageSize);
    },
    currentPage(v) {
      this.cp = v;
    }
  },
  computed: {
    isLastDisabled() {
      if (this.totalPage <= 0) {
        return true;
      }
      return this.currentPage === this.totalPage;
    }
  }
}
</script>

<style lang='less'>
    .custom-page{
        padding: 10px;
        text-align: center;
    }
    .el-pagination .btn-next, .el-pagination .btn-prev {
        background: transparent;
        background-size: 16px;
        cursor: pointer;
        margin: 0;
        color: #409EFF;
    }

    .el-pagination {

        button {
            background: transparent;

            &:disabled {
                background: transparent;
                color: #7b7b7b;
            }
        }

        .el-pager li.active {
            + li {
                /*border-left: 1px solid #e5e5e5;*/
            }

            /*background: #409EFF;*/
            /*border: 1px solid #e5e5e5;*/
            line-height: 26px;
            margin: 0 2px;
            color: #3C9DBE;
            font-weight: bold;
        }

        .el-pager li {
            background: transparent;
            /*border: 1px solid #e5e5e5;*/
            line-height: 26px;
            margin: 0 2px;
            color: #999999;
            font-weight: 400;

            &:hover {
                border-color: #3C9DBE !important;

            }
        }

        .el-input__inner {
            background: transparent;
        }
    }

    .custom-page-size {
        padding: 0 12px;
        display: inline-block;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        vertical-align: top;
        box-sizing: border-box;
        color: #a9aaaa;
        font: 100 13.3333px Arial;
        text-align: center;
    }
</style>
